<template>
    <div>
        <!-- 面包屑导航 -->
        <bread></bread>
        <!-- 添加按钮 -->
        <el-button @click="addDialog" plain class="btn" type="primary" size="small">添加</el-button>
        <!-- 表格 -->
        <v-list @edit="edit"></v-list>
        <!-- 对话框 -->
        <v-dialog ref="dialog" @close="close" :isShow="isShow" :win="win"></v-dialog>
    </div>
</template>

<script>
//引入list组件
import vList from './list.vue'
//引入弹框组件
import vDialog from './dialog.vue'
export default {
    data() {
        return {
            isShow:false,  //控制弹窗显示隐藏
            win:false, // 控制弹窗是添加还是
        };
    },
    components: {
        vList,
        vDialog
    },
    methods: {
        //封装一个添加按钮事件，目的 打开弹框
      addDialog(){
          //打开弹框
          this.isShow = true
          // win 为 true 是添加弹窗
          this.win=true
      },
      // 弹窗组件传递的状态，控制弹窗隐藏
      close(e){ 
        this.isShow = e
      },
      // 编辑按钮的事件传递
      edit(id){
        //打开弹框
          this.isShow = true
          // win 为 false 是修改弹窗
          this.win=false
          this.$refs.dialog.getInfo(id)
      }
    },
};
</script>

<style  lang="less" scoped>

.btn {
  margin: 10px 5px;
}

</style>
